<template>
  <div class="pokenman-data" v-loading="loading">
    <el-row>
      <el-col :span="12">
        <Card :cardInfo="pikachu" />
        <Card :cardInfo="jieni" />
      </el-col>
      <el-col :span="12">
        <Card :cardInfo="kabi" />
        <Card :cardInfo="keda" />
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="15">
        <ActiveCard />
      </el-col>
      <el-col :span="9">
        <Rader />
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <PieChart />
      </el-col>
      <el-col :span="14">
        <LineChart />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import Card from '../../components/Card.vue';
import pikaImg from '../../assets/pika.jpeg'
import jieniImg from '../../assets/jieni.jpeg'
import kedaImg from '../../assets/keda.jpeg'
import kabiImg from '../../assets/kabi.jpeg'
import Rader from './Rader.vue';
import ActiveCard from './ActiveCard.vue';
import LineChart from './LineChart.vue';
import PieChart from './PieChart.vue';
import { onMounted, ref } from 'vue';

let loading = ref(true)

onMounted(() => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
})
const pikachu = {
  name: '皮卡丘',
  price: 1000,
  imgUrl: pikaImg,
  department: '雷电系',
  depColor: ' orange',
  description: '皮卡丘最强！我说的！'
}

const jieni = {
  name: '杰尼龟',
  price: 70,
  imgUrl: jieniImg,
  department: '颚龟',
  depColor: '#409EFF',
  description: '会咬人'
}

const keda = {
  name: '可达鸭',
  price: 50,
  imgUrl: kedaImg,
  department: '精神系',
  depColor: '#f3d19e',
  description: '最近在KFC很火'
}

const kabi = {
  name: '卡比兽',
  price: 233,
  imgUrl: kabiImg,
  department: '草系',
  depColor: '#95d475',
  description: '只会睡觉'
}


</script>

<style scoped lang="less">
</style>